<template>
    <div>
        <el-row>
            <el-col :span="8" class="section1">
                <div>
                    <el-form :inline="true">
                        <el-row>
                            <el-form-item label="区域">
                                <el-select v-model="orderParam.areaId" placeholder="请选择" @change="updateRooms">
                                    <el-option v-for="area in areaData" :key="area.id" :label="area.name"
                                        :value="area.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-row>
                        <el-row>
                            <el-form-item label="房间">
                                <el-select v-model="orderParam.roomId" placeholder="请选择">
                                    <el-option v-for="room in roomData" :key="room.id" :label="room.roomnum"
                                        :value="room.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-row>
                        <el-row>
                            <el-form-item label="登记时间">
                                <el-date-picker v-model="orderParam.inTime" type="date" placeholder="选择日期时间"
                                    value-format="yyyy-MM-dd" style="width: 200px">
                                </el-date-picker>
                            </el-form-item>
                        </el-row>
                        <el-row class="align-right">
                            <el-form-item :inline="true">
                                <el-button type="primary" @click="queryUser">搜索</el-button>
                                <el-button @click="clear">重置</el-button>
                            </el-form-item>
                        </el-row>
                        <el-row>
                            <el-table :data="tableData" style="width: 100%" @row-click="handleRowClick">
                                <el-table-column prop="bedNum" label="床位号">
                                </el-table-column>
                                <el-table-column prop="name" label="老人姓名">
                                </el-table-column>
                                <el-table-column prop="gender" label="性别">
                                    <template slot-scope="scope">
                                        <span>{{ scope.row.gender === 1 ? '男' : '女' }}</span>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <el-col class="align-right" style="margin-top:200px">
                                <!-- 放分页部分 -->
                                <el-pagination background :page-sizes="[3, 5, 10, 20]" :page-size="pageSize"
                                    :current-page="pageNum" layout="total, sizes, prev, pager, next"
                                    @next-click="nextPage" @prev-click="prevPage" @size-change="sizeChange"
                                    @current-change="currentPage" :total="total"></el-pagination>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
            </el-col>
            <el-col :span="16">
                <div>
                    <el-row class="section">
                        <el-col :span="2" class="offset">
                            {{ this.userData.name }}
                        </el-col>
                        <el-col :span="1" class="offset">
                            <div v-if="this.userData.gender === 1" style="font-size:13px;">男</div>
                            <div v-else>女</div>
                        </el-col>
                        <el-col :span="1" class="offset">
                            {{ this.userData.age }}岁
                        </el-col>
                        <el-col :span="2" class="offset1">
                            <el-tag>
                                <div v-if="this.userData.socialStatus === 0">职工社保</div>
                                <div v-else>居民社保</div>
                            </el-tag>
                        </el-col>
                        <el-col :span="2" class="offset1">
                            <el-tag type="success">
                                {{ this.userData.nursingName }}
                            </el-tag>
                        </el-col>
                        <el-col :span="8" class="offset">
                            <div style="font-size:13px;">住院余额:￥{{this.userData.resultMoney}}</div>
                        </el-col>
                        <el-col class="offset2">
                            <el-table :data="paramData">
                                <el-table-column label="护理记录(生活)" align="center" :span="12">
                                    <el-table-column :label="'老人姓名: ' + userData.name">
                                        <el-table-column label="时间" width="180" align="center">
                                            <template slot-scope="scope">
                                                <el-date-picker v-model="scope.row.createTime" type="date"
                                                    placeholder="选择时间" value-format="yyyy-MM-dd" style="width: 100%">
                                                </el-date-picker>
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="意识(次)" align="center">
                                            <el-table-column label="清醒" align="center">
                                                <template slot-scope="scope">
                                                    <el-input v-model="scope.row.consciousness1"></el-input>
                                                </template>
                                            </el-table-column>
                                            <el-table-column label="模糊" align="center">
                                                <template slot-scope="scope">
                                                    <el-input v-model="scope.row.consciousness2"></el-input>
                                                </template>
                                            </el-table-column>
                                            <el-table-column label="昏睡" align="center">
                                                <template slot-scope="scope">
                                                    <el-input v-model="scope.row.consciousness3"></el-input>
                                                </template>
                                            </el-table-column>
                                        </el-table-column>
                                    </el-table-column>
                                    <el-table-column :label="'房间:' + userData.roomnum">
                                        <el-table-column label="清洁起居(次)" align="center">
                                            <el-table-column label="洗漱" align="center">
                                                <template slot-scope="scope">
                                                    <el-input v-model="scope.row.cleanliness1"></el-input>
                                                </template>
                                            </el-table-column>
                                            <el-table-column label="洗头" align="center">
                                                <template slot-scope="scope">
                                                    <el-input v-model="scope.row.cleanliness2"></el-input>
                                                </template>
                                            </el-table-column>
                                            <el-table-column label="洗澡" align="center">
                                                <template slot-scope="scope">
                                                    <el-input v-model="scope.row.cleanliness3"></el-input>
                                                </template>
                                            </el-table-column>
                                        </el-table-column>
                                        <el-table-column label="饮食" align="center">
                                            <el-table-column label="正常" align="center">
                                                <template slot-scope="scope">
                                                    <el-input v-model="scope.row.eating1"></el-input>
                                                </template>
                                            </el-table-column>
                                            <el-table-column label="不吃不喝" align="center">
                                                <template slot-scope="scope">
                                                    <el-input v-model="scope.row.eating2"></el-input>
                                                </template>
                                            </el-table-column>
                                        </el-table-column>
                                    </el-table-column>
                                    <el-table-column :label="'床号:' + userData.bedNum">
                                        <el-table-column label="服药" align="center">
                                            <el-table-column label="早" align="center">
                                                <template slot-scope="scope">
                                                    <el-input v-model="scope.row.medicineMorning"></el-input>
                                                </template>
                                            </el-table-column>
                                            <el-table-column label="中" align="center">
                                                <template slot-scope="scope">
                                                    <el-input v-model="scope.row.medicineAfternoon"></el-input>
                                                </template>
                                            </el-table-column>
                                            <el-table-column label="晚" align="center">
                                                <template slot-scope="scope">
                                                    <el-input v-model="scope.row.medicineEvening"></el-input>
                                                </template>
                                            </el-table-column>
                                        </el-table-column>
                                    </el-table-column>
                                    <el-table-column :label="'档案号:' + userData.userNum" align="center">
                                        <el-table-column label="异常情况及处理措施" align="center" width="180">
                                            <template slot-scope="scope">
                                                <el-input v-model="scope.row.remark"></el-input>
                                            </template>
                                        </el-table-column>
                                    </el-table-column>
                                    <el-table-column label="操作" align="center">
                                        <template slot-scope="scope">
                                            <el-button type="text" size="mini"
                                                @click="removeRow(scope.$index)">删除</el-button>
                                        </template>
                                    </el-table-column>
                                </el-table-column>
                            </el-table>
                            <el-col>
                                <el-button v-if="!isEditing" type="primary" @click="toggleEditMode">编辑</el-button>
                                <el-button v-else-if="isEditing" type="primary" @click="addRow">新增行</el-button>
                            </el-col>
                            <el-col class="align-right">
                                <el-button v-if="isEditing" @click="saveChanges">保存</el-button>
                            </el-col>
                        </el-col>
                    </el-row>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default {
    data() {
        return {
            isEditing: false,
            pageNum: 1,
            pageSize: 5,
            total: 0,
            orderParam: {
                areaId: '',
                roomId: '',
                inTime: '',
                status:'1'
            },
            roomData: [],
            areaData: [],
            tableData: [],
            userData: [],
            activeName: 'second',
            paramData: [
                {
                    createTime: '',
                    consciousness1: '',
                    consciousness2: '',
                    consciousness3: '',
                    cleanliness1: '',
                    cleanliness2: '',
                    cleanliness3: '',
                    eating1: '',
                    eating2: '',
                    medicineMorning: '',
                    medicineAfternoon: '',
                    medicineEvening: '',
                },
            ]
        }
    },
    methods: {
        clear() {
            this.orderParam = {}
            this.queryUser();
        },
        prevPage(val) {
            //点击上一页触发
            this.pageNum = val;
            this.queryUser();
        },
        nextPage(val) {
            //点击下一页触发
            this.pageNum = val;
            this.queryUser();
        },
        sizeChange(val) {
            //val每一页条数
            this.pageNum = 1;
            this.pageSize = val;
            this.queryUser();
        },
        currentPage(val) {
            this.pageNum = val;
            this.queryUser();
        },
        queryCondition() {
            this.pageNum = 1;
            this.queryUser();
        },
        //查找所有区域
        queryAllArea() {
            this.$axios.get('api/bed/queryAllArea')
                .then(res => {
                    if (res.data.code == 200) {
                        this.areaData = res.data.data
                    }
                })
        },
        //根据区域id查找房间
        updateRooms() {
            this.orderParam.roomId = "";
            this.$axios.get('api/bed/queryByAreaId/' + this.orderParam.areaId)
                .then(res => {
                    if (res.data.code == 200) {
                        this.roomData = res.data.data
                    }
                })
        },
        //查老人
        queryUser() {
            let pageParam = {};
            pageParam.pageNum = this.pageNum;
            pageParam.pageSize = this.pageSize;
            pageParam.param = this.orderParam;
            this.$axios.post("api/user/queryUser", pageParam).then(res => {
                if (res.data.code == 200) {
                    let pageData = res.data.data;
                    this.tableData = pageData.list;
                    //给分页参数赋值
                    this.total = pageData.total;
                    this.pageNum = pageData.pageNum;
                    this.pageSize = pageData.pageSize;
                    if (this.tableData.length > 0) {
                        this.userData = this.tableData[0];
                    }
                } else {
                    this.$router.push({ path: "/login" });
                }
            });
        },
        handleRowClick(row) {
            // 处理点击事件，row 为当前点击的行数据
            this.userData = row
        },
        handleClick(tab, event) {
            console.log(tab, event);
        },
        addRow() {
            this.paramData.push({
                time: '',
                consciousness1: '',
                consciousness2: '',
                consciousness3: '',
                cleanliness1: '',
                cleanliness2: '',
                cleanliness3: '',
                eating1: '',
                eating2: '',
                medicineMorning: '',
                medicineAfternoon: '',
                medicineEvening: ''
            });
        },
        removeRow(index) {
            this.paramData.splice(index, 1);
        },
        // 切换编辑模式
        toggleEditMode() {
            this.isEditing = !this.isEditing;
        },
        // 保存修改
        saveChanges() {
            // 保存修改后执行的操作
            this.isEditing = false; // 退出编辑模式

            // 清除空对象
            this.paramData = this.paramData.filter(obj => Object.keys(obj).length !== 0);

            // 只传递非空行的数据
            const nonEmptyRows = this.paramData.filter(row => {
                for (const key in row) {
                    if (row[key] !== '') {
                        return true;

                    }
                }
                return false;
            });

            nonEmptyRows.forEach(row => {
                row.name = this.userData.name;
                row.userNum = this.userData.userNum;
                row.nursingName = this.userData.nursingName
            });
            let isEmpty = true;

            for (let i = 0; i < nonEmptyRows.length; i++) {
                if (nonEmptyRows[i] !== "") {
                    isEmpty = false;
                    break;
                }
            }

            if (isEmpty) {
                // nonEmptyRows 里面的内容为空...
                this.$message({
                    type: 'error',
                    message: '内容为空'
                });
                return;
            }
            console.log(nonEmptyRows)
            this.$axios.post('api/nursing/insertNurseRecord', nonEmptyRows)
                .then(res => {
                    if (res.data.code == 200) {
                        // 响应成功后的操作
                        this.$message({
                            type: 'success',
                            message: '添加成功'
                        });
                        this.paramData = [];
                        this.queryUser();
                    }
                })

        },
    },
    created() {
        this.queryAllArea()
        this.queryUser()
    },

}
</script>

<style scoped>
.section {
    width: 900px;
    height: 800px;
    background-color: white;
    margin-left: 20px;
    margin-top: 25px;
}

.section1 {
    width: 350px;
    height: 800px;
    background-color: white;
    margin-left: 50px;
    margin-top: 25px;
}

.offset {
    margin-top: 15px;
    margin-left: 15px;
}

.offset1 {
    margin-top: 15px;
    margin-left: 15px;
}

.offset2 {
    margin-top: 50px;

}

.align-right {
    display: flex;
    justify-content: flex-end;
}
</style>